<style scoped lang="stylus" type="text/stylus">
  @import "notification.styl"
</style>

<template>
  <div id="NoticeNotification">
    <div class="nav">
      <div class="inform">
        <span @click="getAllNOticeClick" :class="{'active':choose1}">全部通知</span>
        <span @click="getMeetNOticeClick" :class="{'active':choose2}">开会通知</span>
        <span @click="getreadNOticeClick" :class="{'active':choose3}">阅读通知</span>
      </div>
      <div class="sendInform">
        <router-link to="/notification/group" class="groupButton" name="Group">
          <div>
            通知群组管理
          </div>
        </router-link>
        <router-link to="/notification/publish" class="publishButton" name="Publish">
          <div>
            发布通知
          </div>
        </router-link>

      </div>
    </div>
    <div class="content" v-show="isHideNotification">
      <VuePerfectScrollbar class="contentScrollbar">
        <ul>
          <router-link v-for="(item,index) in AllNoticeList" :key="index" :to="'/notification/noticeInfo/'+item.id">
            <li>
              <div>
                <div class="headline">
                  <h2>{{item.title}}</h2>
                  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                  <span><Icon type="information-circled"></Icon>&nbsp;<b v-if="item.type==1">会议</b><b
                    v-if="item.type==0">阅读</b></span>
                </div>
                <div class="subhead">
                  通知企业:
                  <span>{{item.name}}</span>
                  ({{item.countOrg}}家企业)
                  <!-- ({{item.countOrg}}) -->
                </div>
                <div class="mainContent">
                  <Code class="markdownCon" v-html="item.content"></Code>
                </div>
                <div class="noticeTimeInfo">
                  <div class="noticeLeft">
                    <div class="noticeLeft01"><span>发布时间</span>{{item.subDateText}}</div>
                    <div class="noticeLeft02"><span>限定企业回应期限</span>{{item.endDateText}}<span class="endDayTextStyle">({{item.endDayText}}天)</span>
                    </div>
                    <div class="noticeLeft03" v-if="item.type==1"><span>会议时间</span>{{item.meetDateText}}<span
                      class="subDateTextStyle">({{item.meetDayText}}天)</span></div>
                  </div>
                  <div class="noticeRight">
                    <div class="noticeRight01"><span>{{item.occupancy}}%</span></div>
                    <div class="noticeRight02"><span>{{item.joinOrg}}个企业已确认参加</span></div>
                  </div>
                </div>
              </div>
            </li>
          </router-link>
        </ul>
        <div class="notContent" v-show="AllNoticeList.length == 0">
            <i class="icon iconfont icon-zanwuneirong"></i>
            <div class="name">暂无内容</div>
        </div>
      </VuePerfectScrollbar>

    </div>
  </div>
</template>

<script>
  import common from "../../../common/common.js";

  export default {
    name      : "Notification",
    data() {
      return {
        noticeFlag        : "ALL",
        isHideNotification: true,
        AllNoticeList     : [],
        choose1           : false,
        choose2           : false,
        choose3           : false,
        noticeId          : 0
      };
    },
    created() {
      this.getAllNotice();
    },
    mounted() {
      this.$nextTick(function () {});
    },
    // destroyed() {
    //   bus.$emit("itemId", itemId);
    // },
    methods   : {
      // checkTargetOne(itemId) {
      //   // console.log(itemId + "111111");
      //   this.isHideNotification = false;
      // },
      noticeInfoShow() {
        this.isNotShow        = false;
        this.isNoticeInfoShow = true;
      },
      getAllNOticeClick(e) {
        this.choose1     = true;
        this.choose2     = false;
        this.choose3     = false;
        const noticeFlag = "ALL";
        const url        = `${common.apihost}/notice/findNoticeByNoticeFlag`;
        this.$http
          .post(url, {noticeFlag: noticeFlag}, {emulateJSON: true})
          .then(response => {
            this.AllNoticeList = response.body.result;
            // console.log(this.AllNoticeList);
          });
      },
      getMeetNOticeClick() {
        this.choose1     = false;
        this.choose2     = true;
        this.choose3     = false;
        const noticeFlag = "1";
        const url        = `${common.apihost}/notice/findNoticeByNoticeFlag`;
        this.$http
          .post(url, {noticeFlag: noticeFlag}, {emulateJSON: true})
          .then(response => {
            this.AllNoticeList = response.body.result;
            // console.log(this.AllNoticeList);
          });
      },
      getreadNOticeClick() {
        this.choose1 = false;
        this.choose2 = false;
        this.choose3 = true;
        // $("e.taget").addClass("active");
        // $(".inform span").classList.add("active");
        // $(".inform span")
        //   .siblings()
        //   .classList.remove("active");
        const noticeFlag = "0";
        const url        = `${common.apihost}/notice/findNoticeByNoticeFlag`;
        this.$http
          .post(url, {noticeFlag: noticeFlag}, {emulateJSON: true})
          .then(response => {
            this.AllNoticeList = response.body.result;
          });
      },
      getAllNotice() {
        this.choose1   = true;
        let noticeFlag = this.noticeFlag;
        const url      = `${common.apihost}notice/findNoticeByNoticeFlag`;
        this.$http
          .post(url, {noticeFlag: noticeFlag}, {emulateJSON: true})
          .then(response => {
            this.AllNoticeList = response.body.result;
            // const id = this.AllNoticeList.id;
            // console.log(id);
            // const url = `${common.apihost}notice/findOtherGroupByNoticeId`;
            // this.$http
            //   .post(url, { id: id }, { emulateJSON: true })
            //   .then(response => {
            //     this.companysListInfo = response.body.result;
            //     console.log(this.companysListInfo);
            //   });
          });
      }
    }
  };
</script>
